import React from 'react'
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar, Cell, Input, hooks, Button } from 'react-vant';
import { goZhuCe } from '../../api';

export default function Step3() {

    let { tel } = useSelector(state => state.user)
    let navigate = useNavigate()
    const [state, updateState] = hooks.useSetState({
        text: '',
    })

    function isValidPw(phone) {
        const reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$/;
        return reg.test(phone);
    }

    const Next = () => {
        console.log(666);
        goZhuCe({ tel, password: state.text }).then(res => {
            console.log(res);
            if(res.data.code === '200'){
                navigate('/login')
            }
        })
    }

    return (
        <div>
            <NavBar
                title="京东注册"
                leftText="返回"
                onClickLeft={() => Toast('返回')}
            />

            <Cell>
                <Input
                    prefix="密码"
                    value={state.text}
                    onChange={text => updateState({ text })}
                    placeholder='至少六位，包含：数字，大写、小写字母，特殊符号'
                />
            </Cell>

            {!isValidPw(state.text) && <Button disabled round type='info'>
                完成
            </Button>}
            {isValidPw(state.text) && <Button round type='info' onClick={Next}>
                完成
            </Button>}
        </div>
    )
}
